<template>
	<view class="e-p-20">
		<view class="e-m-b-20 e-p-20 bg-white border-radius-10 e-flex" v-for="item in list" :key="item.id" @tap="productId = item.id">
			<view class="e-p-r-20">
				<image v-if="item.id === productId" class="img-40" :src="$staticPath('classify/selected-radio.png')" mode=""></image>
				<image v-else class="img-40" :src="$staticPath('classify/radio.png')" mode=""></image>
			</view>
			<load-image  size="122rpx" :src="item.skuCoverImg" />
			
			<view class="e-flex-1 e-p-l-20">
				<view class="e-line-1 e-m-b-26">
					<text class="c-333 e-font-30 fw-600">{{ item.productName }}</text>
				</view>
				<view class="c-999 e-font-24">
					{{ item.skuSpec }}
				</view>
				<view class="e-flex" v-if="item.id === productId">
					<view class="e-flex-1"></view>
					<view class="">
						<e-number-box v-model="qty" :max="item.stock" :min="1"></e-number-box>
					</view>
				</view>
			</view>
		</view>
		<view class="h-140"></view>
		<view class="h-140 btn-box">
			<e-button size="large" :color="AppSkin.primary" shape="circle" :text="$t('store.xyb')" @click="handleTo"></e-button>
		</view>
	</view>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import { getUserTimeCard} from '@/common/request/api'
import type { TimeCardGoods} from '@/common/request/api'

import {
		useCurrentInstance
	} from '@/common/hooks'

const props = defineProps({
	carId:String
})

const ctx = useCurrentInstance()

const list = ref<TimeCardGoods[]>([])
const productId = ref<string|number>('')
const qty = ref(1)


	getUserTimeCard({carId:props.carId!}).then(res => {
		list.value = res.data
	})
	const handleTo = () => {
		if (!productId.value) return
		ctx.$goTo(`/pages/classify/reservation/index?skuId=${productId.value}&qty=${qty.value}`)
	}
</script>

<style lang="scss">

.h-140 {
	width: 100vw;
	height: 140rpx;
}
.btn-box {
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 20rpx 40rpx;
}
</style>
